<template>
    <div class="video-wrapper">
        <video ref="videoPlayer" class="video-js"
            x5-video-player-fullscreen="false"
            playsinline
            webkit-playsinline
            x-webkit-airplay="allow"
        ></video>
    </div>
</template>
<script>
import videojs from 'video.js';
export default {
    name: 'VideoPlayer',
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null,
            config: {
                poster: 'http://ceshi.qnggg.com/attachment/images/3/2019/08/UJjmSkfSsHNSFsjjbdKsjmwCnsS1NZ.jpeg', // 视频封面图地址
                controls: true,
                autoplay: false,
                fluid: true, // 画面自适应宽高
                width: "100%",
                sources: [
					{
						src: "http://proxy.hls.yy.com/livesystem/15013_xv_22490906_22490906_0_0_0-15013_xa_22490906_22490906_0_10_0.m3u8?org=yyweb&uuid=ffb883ee942d4b83819e2311c35e4392&t=1568819031&tk=bfed941fe47623cfc65cb58e670465c1",
						type: "application/x-mpegURL"
					}
				]
            }
        }
    },
    computed:{
        videoOptions(){
            return {...this.config, ...this.options};
        }
    },
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.config, function(){
            console.log('onPlayerReady', this);
        })
    },

    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
};
</script>

<style lang="scss" scoped>
.video-wrapper {
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
}
.video-js {
    width: 100%;
    height: 100%;
}
</style>
